<%@ page language="java" contentType="text/html;charset=utf-8"%>
<!doctype html>
<!--[if lt IE 7]><html lang="en-CA" class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html lang="en-CA" class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html lang="en-CA" class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en-CA" class="no-js">
<!--<![endif]-->
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Guhappy</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<%
		String path = request.getContextPath();
		String basePath = request.getScheme() + "://"
				+ request.getServerName() + ":" + request.getServerPort()
				+ path + "/";
	%>
	<base href="<%=basePath%>">
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/header.css" rel="stylesheet">
	<link href="css/common.css" rel="stylesheet">
	<style type="text/css">
		#vote_button{
			width:120px;
			color:white;
			background-color:#0050FF;
		}
		
		#checkout_button{
			width:120px;
			color:white;
			background-color:#329632;
		}
		
		button.dropdown-toggle
		{
			width:120px;
		}
		
		/* MULTI-LEVEL DROPDOWNS FOR BOOTSTRAP */
		.dropdown-menu .sub-menu {
			left: 100%;
			position: absolute;
			top: 0;
			visibility: hidden;
			margin-top: -1px;
		}

		.dropdown-menu li:hover .sub-menu {
			visibility: visible;
			display: block;
		}
	</style>
</head>
<body>
	<jsp:include page="header.jsp" />
	<div class="row" style="margin-top:80px">
		<div class="col-xs-12 col-md-8 col-md-offset-2">
			<div id='popularStocks' class='marquee-with-options'>滚动条</div>
		</div>
	</div>
	
	<div class="row" style="margin-top:20px">
		<div class="container col-md-5 col-xs-offset-1 col-md-offset-2">
			<form class="form-inline" role="form">
				<h4>You are voting the stock below:</h4>
				<div class="input-group">
					<span class="input-group-btn">
						<div class="btn-group">
							<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
								<span id="areaCode">Canada</span>
								<span class="caret"></span>
							</button>
							<ul class="dropdown-menu">
								<li><a href="javascript:void(0)">Canada</a></li>
								<li><a href="javascript:void(0)">China</a></li>
								<li><a href="javascript:void(0)">United States</a></li>
								<li><a href="javascript:void(0)">France</a></li>
								<!-- <li role="presentation" class="divider"></li> -->
							</ul>
						</div>
					</span>
					<input type="text" class="form-control" id="stock_symbol" placeholder="Please enter company name or symbol.">
				</div>
				<div class="input-group" style="margin-top:20px">
					<input type="radio" name="bull_bear" id="bull_stock" value="Bull" checked>
					<label for="bull_stock">&nbsp;&nbsp;Bull</label>&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="radio" name="bull_bear" id="bear_stock" value="Bear">
					<label for="bear_stock">&nbsp;&nbsp;Bear</label>
				</div>

				<div style="margin-top:20px">
					<label for="period">Select Period:</label><br>
					<div id="period" class="btn-group" data-toggle="buttons">
						<label id='default_period' class="btn btn-default active">
							<input type="radio" name="select-period" id="select-period" value="3-days">
						3-days </label>
						<label class="btn btn-default">
							<input type="radio" name="select-period" id="select-period" value="weekly">
						Weekly </label>
						<label class="btn btn-default">
							<input type="radio" name="select-period" id="select-period" value="monthly">
						Monthly </label>
						<label class="btn btn-default">
							<input type="radio" name="select-period" id="select-period" value="quarterly">
						Quarterly </label>
						<label class="btn btn-default">
							<input type="radio" name="select-period" id="select-period" value="annually">
						Annually </label>
					</div>
				</div>
				
				<div style="margin-top:45px">
					<button id="vote_button" class="btn btn-default" disabled='true'>Vote</button>
					<button id="checkout_button" class="btn btn-default" style="float:right" type="submit" disabled='true'>Check out</button>
				</div>
			</form>
		</div>
		<div class="container col-md-4 col-xs-offset-1" style="margin-top:45px">
			You have selected <span id="list_len"></span> votes:<br><br>
			<span id='votes_list'>
			
			</span>
		</div>
	<div>
	
</body>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script src="js/header.js"></script>
<script type="text/javascript" src="js/bar.js"></script>
<script>
function clearForm() {
	$("#stock_symbol").val('');
	$("#vote_button").attr('disabled', 'true');
	$("#period").find(".active").removeClass("active");
	$("#bull_stock").prop("checked", true);
	$("#bear_stock").prop("checked", false);
	$("#default_period").addClass("active");
}

function refreshList() {
	var cookie_votes_list = $.cookie('votes_list');
	if(cookie_votes_list != null) {
		var votesList = JSON.parse(cookie_votes_list);
		if(votesList.votes_list.length > 0) {
			$("#checkout_button").removeAttr('disabled');
		}
		else {
			$("#checkout_button").attr('disabled', 'true');
		}
		$("#list_len").text(function(i,origText) {
			return votesList.votes_list.length;
		});
		$("#votes_list").html(function(i,origHtml){
			var html = "";
			$.each(votesList.votes_list, function(index, result) {
				html += "<div class='row'><div class='col-xs-4 col-md-4'>";
				html += result.market;
				html += ":";
				html += result.symbol;
				html += "</div><div class='col-xs-4 col-md-3'>";
				html += result.bull_bear;
				html += "&nbsp;&nbsp;";
				html += result.period;
				html += "</div><div class='col-xs-4 col-md-1'><button value='";
				html += index;
				html += "' class='btn btn-default delete-btn'>Delete</button>";
				html += "</div></div>";
			});
			return html; 
		});
		$(".delete-btn").click(function(e) {
			e.preventDefault();
			var cookie_votes_list = $.cookie('votes_list');
			if(cookie_votes_list != null) {
				var votesList = JSON.parse(cookie_votes_list);
				votesList.votes_list.splice(parseInt($(this).val(),10), 1);
				$.cookie('votes_list',JSON.stringify(votesList));
				refreshList();
			}
		});
	}
	else {
		$.cookie('votes_list',JSON.stringify({ votes_list:[]}));
		$("#list_len").text(function(i,origText) {
			return "0";
		});
	}
}

$(function() {
	$("#stock_symbol").keyup(function() {
		var symbol = $(this).val();
		if(symbol.length > 0) {
			$("#vote_button").removeAttr('disabled');
		}
		else {
			$("#vote_button").attr('disabled', 'true');
		}
	});
	
	$("#vote_button").click(function(e){
		e.preventDefault();
		var tick = {};
		tick["market"] = $("#areaCode").text();
		tick["symbol"] = $("#stock_symbol").val();
		
		if($("#bull_stock").is(":checked"))
			tick["bull_bear"] = "bull";
		else
			tick["bull_bear"] = "bear";
		tick["period"] = $('#period').find(".active>input").val();
		var cookie_votes_list = $.cookie('votes_list');
		var votesList = JSON.parse(cookie_votes_list);
		$.each(votesList.votes_list, function(index, result) {
			if(result.market == tick.market && 
				result.symbol == tick.symbol ) {
				//Remove from array
				votesList.votes_list.splice(index, 1);
			}    
		});
		votesList.votes_list.push(tick);
		$.cookie('votes_list',JSON.stringify(votesList));
		$("#checkout_button").removeAttr('disabled');
		clearForm();
		refreshList();
	});
	
	//$.removeCookie("votes_list");
	refreshList();
	
	// Setup drop down buttons.
	$(".dropdown-menu li a").bind('click', function(e) {
		$("#areaCode").text($(this).text());
	});

	var $mwo = $('.marquee-with-options');
	
	$.get("data/popular.json",function(data,status){
		if(status=="success") {
			var html = '';
			var data = JSON && JSON.parse(JSON.stringify(data)) || $.parseJSON(data);
			for(var i in data.stocks) {
				var inner = '<span class="popularStock" style="color:';
				var stock = data.stocks[i];
				if(stock.change.indexOf('-') > -1) {
					inner += '#AA1111;">';
				}
				else {
					inner += '#228822;">';
				}
				inner += stock.symbol + ' ' + stock.change + '</span>&nbsp;&nbsp;&nbsp;&nbsp;';
				html += inner;
			}
			
			$("#popularStocks").html(function(i,origHtml){
				return html; 
			});
			
			$mwo.marquee();
			
			var showing = false;
			var symbol = "";
			var currentSymbol = "";
			$(".popularStock").click(function(){
			});
		}
	});
});
</script>
</html>